<template>
  <div class="chart-wrap" :style="{ height: height, width: width }">
    <div
      ref="refCharts"
      class="chart-box"
      :style="{ height: height, width: width }"
    ></div>
    <transition  name="hide">
      <div
        class="box"
        v-if="showPointer"
        :style="{ top: pointer.top, left: pointer.left }"
      >
        <ComMapDialog :title="pointer.title" />
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ComMapDialog } from "./index";
import { reactive, onMounted, ref, nextTick } from "vue";

import * as echarts from "echarts";
import useEcharts from "@/hooks/useEcharts";

import mapJson from "@/assets/echartsMap/data";

const refCharts = ref(null);

const pointer = ref({
  title: "",
  top: "0px",
  left: "0px",
});
const showPointer = ref(false);

const { chart } = useEcharts();

const props = defineProps({
  className: {
    type: String,
    default: "chart",
  },
  width: {
    type: String,
    default: "100%",
    required: true,
  },
  height: {
    type: String,
    default: "100%",
    required: true,
  },
  chartData: {
    type: Object,
    required: true,
  },
});

// 定义变量内容

const data = reactive({
  areaList: [
    {
      name: "鼓楼区",
      value: [119.29929, 26.082284],
      position: {
        top: "100px",
        left: "320px",
      },
    },
    {
      name: "台江区",
      value: [119.310156, 26.058616],
      position: {
        top: "100px",
        left: "320px",
      },
    },
    {
      name: "仓山区",
      value: [119.320988, 26.038912],
      position: {
        top: "180px",
        left: "570px",
      },
    },
    {
      name: "马尾区",
      value: [119.458725, 25.991975],
      position: {
        top: "200px",
        left: "400px",
      },
    },
    {
      name: "晋安区",
      value: [119.328597, 26.078837],
      position: {
        top: "80px",
        left: "580px",
      },
    },
    {
      name: "长乐区",
      value: [119.510849, 25.960583],
      position: {
        top: "200px",
        left: "680px",
      },
    },
    {
      name: "闽侯县",
      value: [119.145117, 26.148567],
      position: {
        top: "100px",
        left: "240px",
      },
    },
    {
      name: "连江县",
      value: [119.538365, 26.202109],
      position: {
        top: "100px",
        left: "680px",
      },
    },
    {
      name: "罗源县",
      value: [119.552645, 26.487234],
      position: {
        top: "50px",
        left: "700px",
      },
    },
    {
      name: "闽清县",
      value: [118.868416, 26.223793],
      position: {
        top: "100px",
        left: "100px",
      },
    },
    {
      name: "永泰县",
      value: [118.939089, 25.864825],
      position: {
        top: "220px",
        left: "130px",
      },
    },
    {
      name: "平潭县",
      value: [119.791197, 25.503672],
      position: {
        top: "320px",
        left: "830px",
      },
    },
    {
      name: "福清市",
      value: [119.376992, 25.720402],
      position: {
        top: "300px",
        left: "600px",
      },
    },
  ],

  showArea: [
    {
      name: "鼓楼区",
      value: [119.29929, 26.082284],
    },
    {
      name: "台江区",
      value: [119.310156, 26.058616],
    },
    {
      name: "仓山区",
      value: [119.320988, 26.038912],
    },
    {
      name: "马尾区",
      value: [119.458725, 25.991975],
    },
    {
      name: "晋安区",
      value: [119.328597, 26.078837],
    },
    {
      name: "长乐区",
      value: [119.510849, 25.960583],
    },
    {
      name: "闽侯县",
      value: [119.145117, 26.148567],
    },
    {
      name: "连江县",
      value: [119.538365, 26.202109],
    },
    {
      name: "罗源县",
      value: [119.552645, 26.487234],
    },
    {
      name: "闽清县",
      value: [118.868416, 26.223793],
    },
    {
      name: "永泰县",
      value: [118.939089, 25.864825],
    },
    {
      name: "平潭县",
      value: [119.791197, 25.503672],
    },
    {
      name: "福清市",
      value: [119.376992, 25.720402],
    },
  ],
  showAreaLable: [],
});

function setOptions(chartData) {
  let uploadDataUrl = mapJson;
  // 注册地图
  echarts.registerMap("fuzhou", uploadDataUrl);

  if (chart.value) {
    chart.value.setOption({
      geo: {
        map: "fuzhou",
        aspectScale: 1.4,
        layoutCenter: ["60%", "50%"], //地图位置
        layoutSize: "100%",
        zoom: 2,
        itemStyle: {
          borderWidth: 4,
          borderColor: "#c3fcff",
          shadowColor: "#098ffb",
          shadowOffsetX: 0,
          shadowOffsetY: 15,
          opacity: 1,

          emphasis: {
            areaColor: "#5bb7ff",
          },
        },
      },
      tooltip: {
        show: true, //是否显示提示框组件，包括提示框浮层和 axisPointer。
        trigger: "item", //触发类型。item,axis,none
        enterable: true, //鼠标是否可进入提示框浮层中，默认为false，
        showContent: true, //是否显示提示框浮层
        triggerOn: "mousemove", //提示框触发的条件(mousemove|click|none)
        showDelay: 0, //浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
        textStyle: {
          color: "transparent",
          fontSize: 12,
        },
        padding: [0, 0],
        hideDelay: 0, //浮层隐藏的延迟
        formatter: (o) => {
    
          if (o.data) {
            let arr = [];
            arr = data.areaList.filter((item) => {
              return item.name == o.name;
            });
            if (arr && arr.length > 0) {
              showPointer.value = true;
              pointer.value = {
                title: o.name,
                top: arr[0].position.top,
                left: arr[0].position.left,
              };
            } else {
              showPointer.value = false;
            }
          }
          return "";
        },
        // `<section class="map-hover-box"><div class="map-hover-mov">33333333</div> </section>`,
        backgroundColor: "transparent", //提示框浮层的背景颜色。
        borderColor: "transparent", //图形的描边颜色
        borderWidth: 0,
        alwaysShowContent: true,
        transitionDuration: 0, //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
      },

      series: [
        {
          name: "福州地图",
          aspectScale: 1.4,
          layoutCenter: ["60%", "50%"], //地图位置
          layoutSize: "100%",
          zoom: 2,
          type: "map",
          map: "fuzhou", // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
          label: {
            show: false,
          },
          itemStyle: {
            label: {
              show: false, //显示名称
            },
            areaColor: "#5bb7ff",
            borderColor: "#40e3ed",
            borderWidth: 1.5,
          },
          emphasis: {
            itemStyle: {
              areaColor: "#74dfff",
            },
            label: {
              show: false, //显示名称
            },
          },
          select: {
            label: {
              show: false, //显示名称
            },
            itemStyle: {
              areaColor: "#5bb7ff",
              borderColor: "#40e3ed",
              borderWidth: 1.5,
            },
          },
          data: data.showArea.map((item) => {
            return {
              name: item.name,
              value: item.value,
            };
          }),
        },
        // 区域散点图
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          zlevel: 2,
          symbolSize: 14,
          rippleEffect: {
            //坐标点动画
            period: 3,
            scale: 5,
            color: "#d65ad0",
            brushType: "fill",
          },
          label: {
            normal: {
              show: false, // 不显示文字
              position: "right",
              formatter: "{b}",
              color: "#b3e2f2",
              fontWeight: "bold",
              fontSize: 16,
            },
          },
          data: data.showArea,
          itemStyle: {
                color: '#ee6fd5',
                shadowBlur: 20,
                shadowColor: "#fdb4da",
          },
          //坐标点颜色
          emphasis: {
            itemStyle: {
              areaColor: "#f00",
            },
          },
        },
        {
          type: "lines",
          zlevel: 3,
          symbol: "circle",
          symbolSize: [5, 5],
          color: "#ff8003",
          opacity: 1,
          label: {
            show: true,
            padding: [5, 10],

            color: "#fff",
            backgroundColor: "#2586f4",
            borderColor: "#b7fcf5",
            borderWidth: 4,
            borderRadius: 6,
            align: "center",
            lineHeight: 20,
            formatter(params) {
              let arr = [params.name];
              return arr.join("\n");
            },
          },
          lineStyle: {
            type: "solid",
            color: "#b7fcf5",
            width: 2,
            opacity: 1,
          },
          data: data.showAreaLable,
        },
      ],
    });
  }
}
// watch(
//   () => data.showArea,
//   (value) => handleChangeAreaLabel(value)
// );

function handleChangeAreaLabel(arr) {
  if (arr.length == 0) {
    return;
  }
  let arr1 = [];
  arr1 = arr.map((item) => {
    let normalNumberX = 0
    let normalNumberY = 0.05
    if(item.name == '鼓楼区'){
      normalNumberY = 0.25
    }else if  (item.name == '晋安区'){
      normalNumberY = 0.35
    }else if  (item.name == '台江区'){
      normalNumberY = 0.16
    }else if  (item.name == '仓山区'){
      normalNumberY = 0.08
      normalNumberX = 0
    }else if  (item.name == '长乐区'){
      normalNumberY = 0.02
    } else if  (item.name == '马尾区'){
      normalNumberY = 0.08
    }
    return {
      name: item.name,
      coords: [item.value, [item.value[0]+normalNumberX, item.value[1] + normalNumberY]],
    };
  });

  data.showAreaLable = arr1;
}
/** 选中某片区域 */
function handleSelectArea(e) {
  let areaName = e.name;
  let arr = [];
  arr = data.areaList.filter((item) => {
    return item.name == areaName;
  });
  if (arr && arr.length > 0) {
    if (data.showArea && data.showArea.length > 0) {
      if (data.showArea[0].name == arr[0].name) {
        data.showArea = [];
        data.showAreaLable = [];
      } else {
        data.showArea = arr;
      }
    } else {
      data.showArea = arr;
    }
  }

  pointer.value = {
    top: e.event.offsetY + "px",
    left: e.event.offsetX + "px",
    title: data.showArea[0].name || "",
  };
}
/** 初始化 */
function initChart() {
  chart.value = echarts.init(refCharts.value, "macarons");
  setOptions(props.chartData);
  handleChangeAreaLabel(data.showArea);
  // chart.value.getZr().on("click", (e) => {
  //   console.log("-----------22222-----------");
  //   console.log(e);
  //   if (!e.target) {
  //     showPointer.value = false;
  //   }
  //   // handleSelectArea(e);
  // });
 
  chart.value.getZr().on("mousemove", (e) => {
 
    if (!e.target) {
      showPointer.value = false;
      chart.value.getZr().setCursorStyle('default')
    }else{
      chart.value.getZr().setCursorStyle('pointer')
    }
 
  });

}

watchEffect(() => {
  if (props.chartData) {
    setOptions(props.chartData);
  }
});

onMounted(() => {
  nextTick(() => {
    initChart();
  });
});
</script>

<style lang="scss" scoped>
.chart-wrap {
  position: relative;
}
.box {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}
</style>
<style scoped>
.hide-enter-active {
  animation: scsle-in 0.5s;
}

.hide-leave-active {
  animation: scsle-in 0.5s reverse;
}
@keyframes scsle-in {
  0% {
    transform: scale(0);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.25);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
 
</style>